import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Button, Form, Icon, Input, Tabs} from 'antd'
import {config} from 'utils'
import DocumentTitle from 'react-document-title'
import GlobalFooter from 'components/GlobalFooter'
import styles from './index.less'
import layout from './layout.less'

const {TabPane} = Tabs
const {footer} = config
const FormItem = Form.Item

const Login = ({
                 loading,
                 dispatch,
                 form: {
                   getFieldDecorator,
                   validateFieldsAndScroll,
                 },
               }) => {
  function handleOk () {
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      dispatch({type: 'login/login', payload: values})
    })
  }

  function getPageTitle () {
    return config.name + '-' + config.description
  }

  return (
    <DocumentTitle title={getPageTitle()}>
      <div className={layout.container}>
        <div className={layout.content}>
          <div className={styles.form}>
            <div className={layout.top}>
              <div className={layout.header}>
                <img alt="logo" className={layout.logo} src={config.logo}/>
                <span className={layout.title}>{config.name}</span>
              </div>
              <div className={layout.desc}>{config.description}</div>
            </div>
            <Tabs className={styles.tabs}>
              <TabPane tab={'用户登录'}>
                <form>
                  <FormItem hasFeedback>
                    {getFieldDecorator('username', {
                      rules: [
                        {
                          required: true, message: '请输入登录用户名',
                        },
                      ],
                    })(<Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} onPressEnter={handleOk}
                              placeholder="Username"/>)}
                  </FormItem>
                  <FormItem hasFeedback>
                    {getFieldDecorator('password', {
                      rules: [
                        {
                          required: true, message: '请输入登录密码',
                        },
                      ],
                    })(<Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
                              onPressEnter={handleOk} placeholder="Password"/>)}
                  </FormItem>
                  <FormItem>
                    <Button type="primary" onClick={handleOk} loading={loading.effects.login}>
                      登陆
                    </Button>
                  </FormItem>
                </form>
              </TabPane>
            </Tabs>
          </div>
        </div>
        <GlobalFooter links={footer.links} />
      </div>
    </DocumentTitle>
  )
}

Login.propTypes = {
  form: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({loading}) => ({loading}))(Form.create()(Login))
